<template>
  <page-wrap back hide-tab title="题目详情" stay-still :bg-color="uNavColor">
    <InterViewNavbg />
    <view class="content">
      <view class="title">{{ data.title }}</view>
      <u-line-progress active-color="#DC7036" :percent="progress" :striped-active="true"></u-line-progress>
      <view class="questTitle">{{ currentIndex + 1 }}、{{ questionTitle }}</view>
      <template v-if="isShowAnswer">
        <view class="questSection">参考答案</view>
        <view class="questAnswer">{{ questionAnswer }}</view>
      </template>
      <view v-else class="showAnswerBtn">
        <u-button class="btn" shape="circle" @click.stop="isShowAnswer = true">查看参考答案</u-button>
      </view>
    </view>
    <view class="likeActon" v-if="isShowAnswer && fromIndex==1">
      <view v-if="likeStatus == 0 || likeStatus == 1" class="likeArea" @tap="clickLike(1)">
        <image class="likeImg" :src="likeStatus == 1 ? likeOn : likeOnGray"></image>
        <text v-if="likeStatus == 1" class="likeOrange">{{ likeNum }}</text>
        <text v-else class="likeGray">有用</text>
      </view>
      <view v-if="likeStatus == 0 || likeStatus == 2" class="likeArea" @tap="clickLike(2)">
        <image class="likeImg" :src="likeStatus == 2 ? likeOff : likeOffGray"></image>
        <text :class="likeStatus == 2 ? 'likeOrange' : 'likeGray'">没用</text>
      </view>
    </view>
    <view class="action">
      <u-button class="btn" shape="circle" :type="upBtnType" :disabled="upBtnDisabled" @click.stop="currentIndex--"
        >上一题</u-button
      >
      <u-button class="btn" shape="circle" :type="downBtnType" :disabled="downBtnDisabled" @click.stop="currentIndex++"
        >下一题</u-button
      >
    </view>
  </page-wrap>
</template>

<script>
import InterViewNavbg from './components/InterViewNavbg.vue';
import { reqZhituGetInfo, reqlikeQuestion, reqQuestionList } from '@/api/modules/company.js';
export default {
  components: {
    InterViewNavbg,
  },
  data() {
    return {
      fromIndex:0, // 0=历史真题列表, 1=专职题库
      positionId: '',
      infoId: '',
      tagLabel:'',
      data: {},
      currentIndex: 0,
      upBtnDisabled: true,
      downBtnDisabled: false,

      likeOn: this.$imgBaseSelf + 'interview/aiLike.png',
      likeOnGray: this.$imgBaseSelf + 'interview/aiLikeGray.png',
      likeOff: this.$imgBaseSelf + 'interview/aiLikeOff.png',
      likeOffGray: this.$imgBaseSelf + 'interview/aiLikeOffGray.png',
    };
  },
  onLoad(options) {
    if (options) {
      this.positionId = options.positionId;
      this.infoId = options.id;
      this.tagLabel = options.tagLabel;
      this.fromIndex = options.from || 0;
    }
  },
  mounted() {
    if (this.fromIndex == 1) {
      this.getQuestionList();
    }else {
      this.getData();
    }
    
  },
  computed: {
    questionTitle: function () {
      var info;
      const { questions } = this.data;
      if (questions && (info = questions[this.currentIndex])) {
        return info.title;
      }
      return '';
    },
    questionAnswer: function () {
      var info;
      const { questions } = this.data;
      if (questions && (info = questions[this.currentIndex])) {
        return info.standardAnswer;
      }
      return '';
    },
    progress: function () {
      const { questions } = this.data;
      if (questions && questions.length > 0) {
        let p = (this.currentIndex + 1) / questions.length;
        return Math.round(p * 100);
      }
      return 10;
    },
    isShowAnswer: {
      get() {
        const { questions } = this.data;
        if (questions && questions.length > 0) {
          let info = questions[this.currentIndex];
          if (info.isShow) {
            return info.isShow;
          }
        }
        return false;
      },
      set(newValue) {
        this.$set(this.data.questions[this.currentIndex], 'isShow', newValue);
      },
    },
    upBtnType: function () {
      const { questions } = this.data;
      if (questions <= 1 || this.currentIndex == 0) {
        this.upBtnDisabled = true;
        return '';
      } else {
        this.upBtnDisabled = false;
        return 'warning';
      }
    },
    downBtnType: function () {
      const { questions } = this.data;
      if (questions == undefined || questions <= 1 || this.currentIndex + 1 == questions.length) {
        this.downBtnDisabled = true;
        return '';
      } else {
        this.downBtnDisabled = false;
        return 'warning';
      }
    },
    likeStatus: {
      get() {
        const { questions } = this.data;
        if (questions && questions.length > 0) {
          let info = questions[this.currentIndex];
          if (info.likeStatus) {
            return info.likeStatus;
          }
        }
        return 0;
      },
      set(newValue) {
        this.$set(this.data.questions[this.currentIndex], 'likeStatus', newValue);
      },
    },
    likeNum: {
      get() {
        const { questions } = this.data;
        if (questions && questions.length > 0 && this.likeStatus == 1) {
          let info = questions[this.currentIndex];
          if (info.likeNum) {
            return info.likeNum;
          }
        }
        return '';
      },
      set(newValue) {
        this.$set(this.data.questions[this.currentIndex], 'likeNum', newValue);
      },
    },
  },

  methods: {
    clickLike(index) {
      if (this.likeStatus == 0) {
        this.likeStatus = index;
      } else {
        this.likeStatus = 0;
      }

      const { questions } = this.data;
      if (questions && questions.length > 0) {
        let info = questions[this.currentIndex];
        if (info.id) {
          this.likeEvent(info.id);
        }
      }
    },

    // 历史真题列表数据
    getData() {
      let params = {
        positionId: this.positionId,
        modelType: 'zt',
        id: this.infoId,
      };
      reqZhituGetInfo(params)
        .then((res) => {
          console.log('🚀 ~ .then ~ res:', res);
          if (res.code == 200) {
            this.data = res.data;
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: 'error',
            });
          }
        })
        .catch((err) => {});
    },

    // 专职题库列表数据
    getQuestionList() {
      let params = {
        positionId: this.positionId,
        personId: uni.getStorageSync('person-id').slice(2) || undefined,
        tagLabel:this.tagLabel||''
      };
      reqQuestionList(params)
        .then((res) => {
          console.log('🚀 ~ .题目列表数据:', res);
          if (res.code == 200) {
            this.data = { questions: res.data };
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: 'error',
            });
          }
        })
        .catch((err) => {});
    },

    // 上报数据
    likeEvent(questionId) {
      let params = {
        questionId: questionId,
        likeStatus: this.likeStatus, // 0:未点赞，1：点赞，2：点踩
        personId: uni.getStorageSync('person-id').slice(2) || undefined,
      };
      reqlikeQuestion(params)
        .then((res) => {
          console.log('🚀 ~ .点赞结果:', res);
          if (res.code == 200) {
            const { num } = res.data;
            this.likeNum = num;
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: 'error',
            });
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  margin: 30rpx 25rpx 20rpx 30rpx;
  overflow: visible;
  .title {
    margin-top: 30rpx;
    font-size: 40rpx;
  }
  .questTitle {
    margin-top: 30rpx;
  }
  .questSection {
    margin-top: 50rpx;
    font-size: 30rpx;
    font-weight: bold;
  }
  .questAnswer {
    margin-top: 30rpx;
    overflow: auto;
    max-height: 720rpx;
  }
  .showAnswerBtn {
    width: 100%;
    height: 500rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.action {
  position: fixed;
  bottom: 52rpx;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  margin: 30rpx 0;
  .btn {
    min-width: 42%;
    margin: 20rpx;
  }
}

.likeActon {
  display: flex;
  justify-content: space-evenly;
  .likeOrange {
    color: #f75a3e;
  }
  .likeGray {
    color: #999999;
  }
  .likeImg {
    width: 48rpx;
    height: 48rpx;
  }
  .likeArea {
    width: 150rpx;
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100rpx;
  }
}
</style>
